<template>
  <div class="block text-center">
    <span class="demonstration"
    ></span
    >
    <el-carousel height="350px">
      <el-carousel-item v-for="item of imgs" :key="item.id">
        <img :src="item.imgSrc" style="width: 100%; height: 350px">
      </el-carousel-item>
    </el-carousel>
  </div>

  <div class="container">
    <div class="left">
      <div v-for="item of news" :key="item.id">
        <div class="title">
          {{ item.title }}
        </div>
        <div class="p" v-for="item1 of item.neirong" :key="item1.id">
          <div class="time">{{item1.time}}</div>
          <div class="fange"></div>
          <div class="wenzi">{{item1.wenzi}}</div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="title">
        三大支柱
      </div>

      <div class="contexts" v-for="sandazhizuInfo of sandazhizuInfos" :key="sandazhizuInfo.id">
        <h3 style="font-weight: 400; padding: 10px 0; color: #747bff">{{sandazhizuInfo.title}}</h3>
        <img :src="sandazhizuInfo.imgSrc" style="width: 100%; height: 200px">
      </div>
    </div>
  </div>
</template>

<script>

import {reactive} from "vue";

export default {
  name: "schoolHome",
  components: {

  },

  setup(){
    const imgs = reactive([
      {
        id: 1,
        imgSrc: './src/assets/home1.jpg'
      },
      {
        id: 2,
        imgSrc: './src/assets/home2.png'
      },
      {
        id: 3,
        imgSrc: './src/assets/home3.png'
      },
      {
        id: 4,
        imgSrc: './src/assets/home4.png'
      }
    ])

    const news = reactive([
      {
        id: 1,
        title: '理论学习',
        neirong: [
          {
            id: 1,
            time: '2023-3-14',
            wenzi: '全国政协十四届一次会议闭幕 习近平等党和国家领导人出席'
          },
          {
            id: 2,
            time: '2023-3-14',
            wenzi: '人民日报：人民的选择'
          },
          {
            id: 3,
            time: '2023-3-14',
            wenzi: '习近平在看望参加政协会议的民建工商联界委员时强调正确引导民营经济健康发展高质量发展'
          },
          {
            id: 4,
            time: '2023-3-14',
            wenzi: '十四届全国人大一次会议在京闭幕 习近平发表重要讲话'
          }

        ]
      },
      {
        id: 2,
        title: '中德要闻',
        neirong: [
          {
            id: 1,
            time: '2022-6-16',
            wenzi: '我校收听收看中国共产党天津市第十二次代表大会实况'
          },
          {
            id: 2,
            time: '2022-5-13',
            wenzi: '我校召开“迎盛会、铸忠诚、强担当、创业绩”主题学习宣传教育实践活动干部读书班'
          },
          {
            id: 3,
            time: '2022-4-15',
            wenzi: '海教园管委会、中铁十局集团一行来访我校'
          },
          {
            id: 4,
            time: '2022-3-22',
            wenzi: '党委书记张兴会同志带队督查学校疫情防控工作'
          }
        ]
      },
      {
        id: 3,
        title: '通知公告',
        neirong: [
          {
            id: 1,
            time: '2022-11-14',
            wenzi: '关于公布学校诉求建议平台及疫情防控服务热线电话的通知'
          },
          {
            id: 2,
            time: '2023-01-04',
            wenzi: '关于2022年天津市中职学校名班主任工作室立项结果的公示'
          },
          {
            id: 3,
            time: '2022-12-08',
            wenzi: '天津中德应用技术大学关于公布第三届“海河工匠杯”技能大赛世赛选拔项目平面设计技术'
          },
          {
            id: 4,
            time: '2022-12-08',
            wenzi: '天津中德应用技术大学关于公布第三届“海河工匠杯”技能大赛制造业根基项目工业互联网技术'
          }
        ]
      }
    ])

    const sandazhizuInfos = reactive([
      {
        id: 1,
        title: '国际合作 —— 传统和基因',
        imgSrc: './src/assets/image1.png'
      },
      {
        id: 2,
        title: '校企合作 —— 优势和灵魂',
        imgSrc: './src/assets/image2.png'
      },
      {
        id: 3,
        title: '创新创业 —— 特色和追求',
        imgSrc: './src/assets/image3.png'
      }
    ])

    return {
      imgs,
      news,
      sandazhizuInfos
    }
  }
}
</script>

<style scoped>
/**/
.container{
  display: flex;
  padding: 0 100px;
  padding-bottom: 100px;
}

.container .left{
  margin-right: 10px;
  flex: 2;
  /*background: #99a9bf;*/
  flex-direction: column;
}

.title{
  padding: 10px 0;
  font-size: 20px;
  box-sizing: border-box;
  border-bottom: #747bff 4px solid;
}



.container .left .p{
  display: flex;
  color: #909399;
  margin: 20px 0;
}

.container .left .p .time{
  flex: 2;
}

.container .left .p .fange{
  display: inline-block;
  height: 20px;
  border-left: solid #d3dce6 4px;
  position: relative;
  flex: 1;
}

.container .left .p .wenzi{
  cursor: pointer;
  flex: 10;
}
.container .left .p .wenzi:hover{
  color: #1a1a1a;
}

.container .right{
  flex: 1;
  height: 300px;
}

/**/
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>